<template>
  <el-form size="small">
  <el-form-item>
    <el-radio v-model='radioValue' :label="1">
    分钟，允许的通配符[, - * /]
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="2">
    周期从
    <el-input-number v-model='cycle01' :min="0" :max="58" /> -
    <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 分钟
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="3">
    从
    <el-input-number v-model='average01' :min="0" :max="58" /> 分钟开始，每
    <el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 分钟执行一次
    </el-radio>
  </el-form-item>
  <el-form-item>
    <el-radio v-model='radioValue' :label="4">
    指定
    <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:100%">
      <el-option v-for="item in 60" :key="item" :value="item-1">{{item-1}}</el-option>
    </el-select>
    </el-radio>
  </el-form-item>
  </el-form>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
  name: 'crontab-min',
  props: ['check', 'cron'],
  setup(props, { emit }) {
  const radioValue = ref(1);
  const cycle01 = ref(1);
  const cycle02 = ref(2);
  const average01 = ref(0);
  const average02 = ref(1);
  const checkboxList = ref([]);
  
  const checkNum = (num, min, max) => {
    return Math.min(Math.max(num, min), max);
  };
  
  const cycleTotal = computed(() => {
    const c01 = checkNum(cycle01.value, 0, 58);
    const c02 = checkNum(cycle02.value, c01 ? c01 + 1 : 1, 59);
    return `${c01}-${c02}`;
  });
  
  const averageTotal = computed(() => {
    const a01 = checkNum(average01.value, 0, 58);
    const a02 = checkNum(average02.value, 1, 59 - a01 || 0);
    return `${a01}/${a02}`;
  });
  
  const checkboxString = computed(() => {
    let str = checkboxList.value.join();
    return str == '' ? '*' : str;
  });
  
  const radioChange = () => {
    switch (radioValue.value) {
    case 1:
      emit('update', 'min', '*', 'min');
      break;
    case 2:
      emit('update', 'min', cycleTotal.value, 'min');
      break;
    case 3:
      emit('update', 'min', averageTotal.value, 'min');
      break;
    case 4:
      emit('update', 'min', checkboxString.value, 'min');
      break;
    }
  };
  
  const cycleChange = () => {
    if (radioValue.value == '2') {
    emit('update', 'min', cycleTotal.value, 'min');
    }
  };
  
  const averageChange = () => {
    if (radioValue.value == '3') {
    emit('update', 'min', averageTotal.value, 'min');
    }
  };
  
  const checkboxChange = () => {
    if (radioValue.value == '4') {
    emit('update', 'min', checkboxString.value, 'min');
    }
  };
  
  watch(radioValue, radioChange);
  watch(cycleTotal, cycleChange);
  watch(averageTotal, averageChange);
  watch(checkboxString, checkboxChange);
  
  return {
    radioValue,
    cycle01,
    cycle02,
    average01,
    average02,
    checkboxList
  };
  }
}
</script>
